<template>
  <section>
    <page-view>
      <template #option>
        <div class="btn-box">
          <el-button type="primary" :loading="loading" @click="exportForm">导出</el-button>
        </div>
      </template>
      <template #form>
        <SearchForm :data-form="form" @onReset="onSearch" @on-search="onSearch">
          <el-form-item label="" prop="invoiceType" style="width:100%">
            <el-select v-model="form.invoiceType" filterable search clearable placeholder="请选择发票类型" style="width:100%">
              <el-option v-for="(item) in Enum.invoiceType" :key="'invoiceType'+item.value" :label="item.name"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="invoiceCode">
            <el-input v-model="form.invoiceCode" clearable placeholder="请输入发票代码" />
          </el-form-item>
          <el-form-item label="" prop="invoiceNo">
            <el-input v-model="form.invoiceNo" clearable placeholder="请输入发票号码" />
          </el-form-item>
          <el-form-item label="" prop="reimburseStatus" style="width:100%">
            <el-select v-model="form.reimburseStatus" clearable filterable placeholder="请选择报账状态" style="width:100%">
              <el-option v-for="(item) in Enum.reimburseStatus" :key="'reimburseStatus'+item.value" :label="item.name"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="flowInstanceCode">
            <el-input v-model="form.flowInstanceCode" clearable placeholder="请输入流程ID" />
          </el-form-item>
          <el-form-item label="" prop="minInvoiceAmount">
            <NumberRange v-model:start="form.minInvoiceAmount" v-model:end="form.maxInvoiceAmount"
              end-prop="maxInvoiceAmount" startPlaceholder="发票开始金额" endPlaceholder="发票结束金额" />
            <!-- <el-input
              v-model="form.invoiceAmount"
              clearable
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
              placeholder="请输入发票金额"
            /> -->
          </el-form-item>
          <el-form-item label="" prop="invoiceDate" class="__ui_date_range" style="width:100%">
            <el-date-picker v-model="form.invoiceDate" style="width:100%" clearable range-separator="-"
              :default-time="defaultTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
              start-placeholder="请选择发票开始时间" end-placeholder="请选择发票截至时间" />
          </el-form-item>
          <!-- <el-form-item
            label=""
            prop="inputData"
            class="__ui_date_range"
            style="width:100%"
          >
            <el-date-picker
              v-model="form.inputData"
              clearable
              style="width:100%"
              :default-time="defaultTime"
              range-separator="-"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              start-placeholder="请选择导入开始时间"
              end-placeholder="请选择导入截至时间"
            />
          </el-form-item> -->
        </SearchForm>
      </template>
      <template #table="tableScope">
        <PubilcTable :isSlot="true" :page-data="pageData" :showIndex="false" :table-data="tableData"
          :tableHeight="tableScope.tableHeight" @on-action="handleAction">
          <el-table-column label="发票类型" prop="invoiceType" width="160">
            <template #default="scope">
              {{ scope.row.invoiceTypeName }}
            </template>
          </el-table-column>
          <el-table-column label="发票代码" prop="invoiceCode" min-width="140">
            <template #default="scope">
              {{ scope.row.invoiceCode * 1 !== 0 ? scope.row.invoiceCode : '' }}
            </template>
          </el-table-column>
          <el-table-column label="发票号码" prop="invoiceNo" min-width="150" />
          <el-table-column label="发票日期" prop="invoiceDate" min-width="120" />
          <el-table-column label="发票金额" prop="invoiceAmount" min-width="110" />
          <el-table-column label="报账状态" prop="reimburseStatus" width="100">
            <template #default="scope">
              {{ scope.row.reimburseStatus * 1 === 0 ? '未报账' : scope.row.reimburseStatus * 1 === 1 ? '报账中' :
              scope.row.reimburseStatus * 1 === 2 ? '已报账' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="所属人员" prop="createUser" min-width="110" />
          <el-table-column label="所属人员账号" prop="createUserEmail" min-width="180" />
          <el-table-column label="报账流程ID" prop="relationInstanceCodes" min-width="180">
            <template #default="{ row }">
              <div v-if="row.relationInstanceCodes">
                <div v-for="(item, index) in row.relationInstanceCodes" :key="'ddd'+index">
                  <el-button type="primary" link @click="go2Detail(item)">{{ item }}</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" prop="createdTime" fixed="right">
            <template #default="scope">
              <el-button type="primary" link @click="handleTicket(scope)">查看</el-button>
            </template>
          </el-table-column>
        </PubilcTable>
      </template>
    </page-view>
    <el-dialog v-model="manuInputDialog" :fullscreen="true" :close-on-click-modal="true" title="查看"
      :before-close="() => manuInputDialog = false" class="pub_dialog" :destroy-on-close="true" append-to-body
      width="980px">
      <scan-bill-form :key="dialogKey" :isDisable="true" :ishandwork="false" ref="scanBillFormRef" style="height: 300px"
        :imageData="manuObj" />
      <template #footer>
        <el-button :disabled="ticketIndex === 0" @click="changeTicket('pre')">上一张</el-button>
        <el-button :disabled="ticketIndex === tableData.length - 1" @click="changeTicket('next')">下一张</el-button>
        <el-button type="default" @click="closeTicket">取消</el-button>
      </template>
    </el-dialog>
  </section>
</template>

<script name="costCenterConfig">
import { onMounted, reactive, toRefs } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { downloadFile } from '@/util/downFile'
import { openFormDetail } from '@/util/index'
import api from '@/api'
import Enum from './Enum'
export default {
  components: {},
  setup() {
    const state = reactive({
      form: {},
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      type: '',
      dataForm: {},
      manuInputDialog: false,
      manuObj: {},
      ticketIndex: 0,
      dialogKey: 0,
      defaultTime: [
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ],
      loading: false
    })

    const methods = {
      // 获取列表数据
      getList() {
        const params = {
          ...state.pageData,
          ...state.form,
        }
        api.Ticket.getReimburseStatistics(params).then((res) => {
          state.pageData.total = res.total
          state.tableData = res.list
        })
      },
    }

    const handler = {
      // 搜索
      onSearch() {
        state.pageData.pageNum = 1
        methods.getList()
      },
      handleTicket(scope) {
        state.manuObj = {}
        state.ticketIndex = scope.$index
        state.dialogKey += 1
        state.manuInputDialog = true
        nextTick(() => {
          console.log(scope.row, 'scope.row')
          state.manuObj = scope.row
        })
      },
      changeTicket (type) {
        if (type === 'next') {
          state.ticketIndex = state.ticketIndex + 1
        } else {
          state.ticketIndex = state.ticketIndex - 1
        }
        nextTick(() => {
          state.manuObj = state.tableData[state.ticketIndex]
        })
      },
      closeTicket () {
        state.manuInputDialog = false
      },
      exportForm () {
      if (!state.form.invoiceDate || state.form.invoiceDate.length <= 0) {
        ElMessage.warning('请选择发票时间！')
        return false
      }
      const startDateObj = new Date(state.form.invoiceDate[0])
      const endDateObj = new Date(state.form.invoiceDate[1])
      if (startDateObj.getFullYear() !== endDateObj.getFullYear() || startDateObj.getMonth() !== endDateObj.getMonth()) {
        ElMessage.warning('发票时间请选择同一个月！')
        return false
      }
      state.loading = true
      api.Ticket.exportReimburseStatisticsExport({
        ...state.pageData,
        ...state.form,
      })
        .then((res) => {
          state.loading = false
          if (res) {
            downloadFile(res, '表单记录', 'xlsx')
          } else {
            ElMessage({
              type: 'error',
              message: '没有数据!'
            });
          }
        })
        .catch(() => {
          state.loading = false
        })
      },
      handleAction([config, data]) {
        if (config === 'pageNum') {
          state.pageData.pageNum = data
        } else {
          state.pageData.pageNum = 1
          state.pageData.pageSize = data
        }
        methods.getList()
      },
      go2Detail (id) {
        openFormDetail({
          flowId: id,
        })
      }
    }

    onMounted(() => {
      handler.onSearch()
    })

    return {
      ...toRefs(state),
      ...handler,
      Enum,
    }
  },
}
</script>

<style scoped>
</style>
